<template>
  <div class="tutorial-chapter-page">
    <a-skeleton :loading="loading" active>
      <div>
        <div class="tutorial-title">{{ category === 'FAQ' ? '问：' : '' }}{{ title }}</div>
        <div class="markdown-tutorial-show-content v-note-wrapper markdown-body" v-if="category !== 'FAQ'">
          <div class="v-note-show">
            <div class="v-show-content" v-html="html" v-copy></div>
          </div>
        </div>
        <div class="comment-modal" v-if="category === 'FAQ'">
          <div class="title">答：</div>
          <div class="list">
            <div class="item" v-for="item in commentList" :key="item.id">
              <div class="top-user">
                <img :src="item.commentator.avatar" alt="" class="avatar">
                <p class="nickname">{{ item.commentator.nickname }}</p>
                <span class="job" v-if="item.commentator.job">{{ item.commentator.job }}</span>
                <span class="job">{{ item.createAt?.substring(0, 10) }}</span>
              </div>
              <div class="v-note-wrapper markdown-body">
                <div class="v-note-show">
                  <div class="v-show-content" v-html="item.content" v-copy></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-skeleton>
  </div>
</template>

<script>
import { md, getMarkdownTos } from '~/util'
export default {
  name: 'TutorialUuidIdPage',
  data () {
    return {
      category: null,
      chapterUuid: null,
      title: null,
      html: null,
      commentList: [],
      loading: true
    }
  },

  methods: {
    async getChapterInfoDetail (chapterUuid) {
      let commentList = []
      const { data } = await this.$axios.post('/gimishare/api/v1/tutorial/chapter-detail', { chapterUuid })
      const { title, markdownContent, category } = data
      if (category === 'FAQ') {
        const { data } = await this.$axios.post('/gimishare/api/v1/tutorial/comments', { chapterUuid })
        commentList = (data.list || []).filter(o => o.isDelete === 0).map(o => {
          const { id, commentator, content, createAt } = o
          return {
            id,
            commentator,
            createAt,
            content: md.render(content)
          }
        })
      }
      this.loading = false
      this.category = category
      this.chapterUuid = chapterUuid
      this.title = title
      this.html = md.render(markdownContent)
      this.commentList = commentList
      this.$nextTick(() => {
        this.generateTocList()
      })
    },

    generateTocList () {
      const tocs = getMarkdownTos(document.querySelector('.markdown-tutorial-show-content'))
      this.$emit('get-tocs', tocs)
    }
  },

  watch: {
    '$route.params.chapterUuid': {
      handler (v) {
        if (v) {
          this.getChapterInfoDetail(v)
        } else {
          this.chapterUuid = null
          this.$emit('get-tocs', [])
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="less" scoped>
.tutorial-chapter-page {
  .tutorial-title {
    font-size: 28px;
    color: #000;
    font-weight: 600;
  }
  .comment-modal {
    margin-top: 40px;
    .title {
      font-size: 28px;
      color: #000;
      font-weight: 600;
    }
    .list {
      margin-top: 24px;
      .item {
        padding: 12px 0;
        .top-user {
          display: flex;
          align-items: center;
          .avatar {
            width: 26px;
            height: 26px;
            object-fit: cover;
            border-radius: 50%;
          }
          .nickname {
            color: #000;
            margin: 0 24px 0 12px;
          }
          .job {
            color: #999;
            margin-right: 24px;
            position: relative;
            &::after {
              content: "";
              width: 1px;
              height: 10px;
              background-color: #ccc;
              position: absolute;
              left: -12px;
              top: 7px;
            }
          }
        }
        .v-note-wrapper {
          padding-left: 38px !important;
        }
      }
    }
  }
}
</style>
